<template>
  <view class="content">
    <view class="main" v-if="tabbarIndex == 0">
      <tabs :tabsList="tabsList" @change="tabschange"></tabs>
      <template v-if="tabindex == 1 || tabindex == 2 || tabindex == 3">
        <view class="flexrow main-list" v-for="(item, index) in ImMessgaeList" :key="item.orderNumber"
          @click="tochat(item)">
          <view class="msgicon">
            <image :src="item.headImage ? imageUrl + item.headImage : headimage" mode="aspectFill"></image>
            <view class="msgicon-icon">
              <!-- 	1:在线问诊2:上门治疗 -->
              <template v-if="item.category == 2">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/up.png" mode=""></image>
              </template>
              <template v-if="item.category == 1">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/wen.png" mode=""></image>
              </template>
            </view>
          </view>
          <view class="msgiconright">
            <view class="flexrow flexbetween">
              <view class="color333">{{ item.name || "" }} {{ item.jobTitle || "" }}</view>
              <view class="fontsize14 color999">{{
                item.lastConverseTime || ""
              }}</view>
            </view>
            <view class="fontsize14 color999 marginTop4">病情描述：{{ item.depict || "无" }}</view>
          </view>
        </view>
      </template>
      <template v-if="tabindex == 4 || tabindex == 5">
        <view class="flexrow main-list" v-for="(item, index) in ImMessgaeList" :key="item.orderNumber"
          @click="tochat(item)">
          <view class="msgiconrighttwo">
            <view class="flexrow flexbetween">
              <view class="" style="
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                ">
                <view class="msgicon flex">
                  <image :src="item.headImage ? baseurl + item.headImage : headimage" mode="aspectFill"></image>
                  <view class="color333">{{ item.name || "" }} {{ item.jobTitle || "" }}</view>
                  <view class="msgicon-icon">
                    <!-- 	1:在线问诊2:上门治疗 -->
                    <template v-if="item.category == 2">
                      <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/up.png" mode="">
                      </image>
                    </template>
                    <template v-if="item.category == 1">
                      <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/wen.png" mode="">
                      </image>
                    </template>
                  </view>
                </view>
                <view class="color333">
                  <template v-if="item.state == 1">未接诊</template>
                  <template v-if="item.state == 6">已退费</template>
                  <template v-if="item.state == 5">已完成</template>
                </view>
              </view>
            </view>
            <view class="" style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              ">
              <view class="fontsize14 color999 marginTop4">病情描述：{{ item.depict || "无" }}</view>
              <view class="fontsize14 color999">{{
                item.lastConverseTime || ""
              }}</view>
            </view>
          </view>
        </view>
      </template>

      <template v-if="tabindex == 0">
        <view v-if="item.state == 1 || item.state == 2 || item.state == 3" class="flexrow main-list"
          v-for="(item, index) in ImMessgaeList" :key="item.orderNumber" @click="tochat(item)">
          <view class="msgicon">
            <image :src="item.headImage ? baseurl + item.headImage : headimage" mode="aspectFill"></image>
            <view class="msgicon-icon">
              <!-- 	1:在线问诊2:上门治疗 -->
              <template v-if="item.category == 2">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/up.png" mode=""></image>
              </template>
              <template v-if="item.category == 1">
                <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/wen.png" mode=""></image>
              </template>
            </view>
          </view>
          <view class="msgiconright">
            <view class="flexrow flexbetween">
              <view class="color333">{{ item.name || "" }} {{ item.jobTitle || "" }}</view>
              <view class="fontsize14 color999">{{
                item.lastConverseTime || ""
              }}</view>
            </view>
            <view class="fontsize14 color999 marginTop4">病情描述：{{ item.depict || "无" }}</view>
          </view>
        </view>
        <!-- 区分 -->
        <view v-if="item.state == 6 || item.state == 5" @click="editreport(item)" class="flexrow main-list"
          v-for="(item, index) in ImMessgaeList" :key="item.orderNumber">
          <view class="msgiconrighttwo">
            <view class="flexrow flexbetween">
              <view class="" style="
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                ">
                <view class="msgicon flex">
                  <image :src="item.headImage ? baseurl + item.headImage : headimage" mode="aspectFill"></image>
                  <view class="color333">{{ item.name || "" }} {{ item.jobTitle || "" }}</view>
                  <view class="msgicon-icon">
                    <!-- 	1:在线问诊2:上门治疗 -->
                    <template v-if="item.category == 2">
                      <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/up.png" mode="">
                      </image>
                    </template>
                    <template v-if="item.category == 1">
                      <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/wen.png" mode="">
                      </image>
                    </template>
                  </view>
                </view>
                <view class="color333">
                  <template v-if="item.state == 1">未接诊</template>
                  <template v-if="item.state == 6">已退费</template>
                  <template v-if="item.state == 5">已完成</template>
                </view>
              </view>
            </view>
            <view class="" style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              ">
              <view class="fontsize14 color999 marginTop4">病情描述：{{ item.depict || "无" }}</view>
              <view class="fontsize14 color999">{{
                item.lastConverseTime || ""
              }}</view>
            </view>
          </view>
        </view>
      </template>
      <u-loadmore :status="status" v-if="ImMessgaeList.length > 0 && blackFlage" />
      <lack v-if="ImMessgaeList.length == 0"></lack>
    </view>
    <Treatment v-if="tabbarIndex == 1"></Treatment>
    <Message v-if="tabbarIndex == 2" ref="msg"></Message>
    <My v-if="tabbarIndex == 3"></My>
    <TabBar :current-page="tabbarIndex" @onTabBarChange="onTabBarChange" />
  </view>
</template>

<script>
import tabs from "../../component/tabs.vue"
import TabBar from "../../components/Tabbar.vue"
import Treatment from "../treatment/treatment.vue"
import Message from "../message/message.vue"
import My from "../my/mine.vue"
import Lack from "@/chronicDisease/components/lack/lack.vue";
import {
  userGetImMessgaeList
} from '../../api/index.js'
import {
  genTestUserSig
} from "@/im/GenerateTestUserSig.js";
export default {
  components: {
    tabs,
    TabBar,
    Treatment,
    Message,
    My,
    Lack
  },
  data() {
    return {
      messagequery: {
        pageNumber: 1, //	必选	Integer	页数
        pageSize: 10, //	必选	Integer	每页显示的数量
        state: 0, //1未接诊（问诊、上门）2已接诊（问诊）3已接诊未上门（上门）4已接诊已上门（上门 且表示已完成）5已完成（问诊已完成，表示处方开出后24小时已经超过）6未接诊已退费（超过24小时没被接诊）
      },
      status: 'nomore',
      ImMessgaeList: [],
      blackFlage: false,
      headimage: 'https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/avatar.png',
      baseurl: "",
	  userId: '',
      tabsList: ['全部', '待接诊', '已接诊', '待上门', '已完成', '已退费'],
      tabindex: 1,
      tabbarIndex: 0,
      imageUrl: ''
    }
  },
  onLoad() {
    this.baseurl = this.$store.state.chronic.baseUrl
    this.imageUrl = this.$store.state.chronic.baseUrl
    this.$store.commit("chronic/setStartLoaded", true);
    this.userId = uni.getStorageSync('USER_ID').toString()
	console.log("当前用户的手机号：" + this.userId)
	  const {
	    userSig
	  } = genTestUserSig(this.userId);
	  this.$im.login(this.userId, userSig);
	
  },
  onShow() {
    // if (!uni.getStorageSync('token')) {
    //   uni.reLaunch({
    //     url: '../login/login'
    //   })
    // }
    this.ImMessgaeList = []
    this.messagequery.pageNumber = 1
    this.blackFlage = false
    this._userGetImMessgaeList()
  },
  onReachBottom() {
    if (this.blackFlage) {
      return;
    }
    this.messagequery.pageNumber = this.messagequery.pageNumber + 1;
    this._userGetImMessgaeList()
  },
  onPullDownRefresh() {
    this.refresh()

  },
  methods: {
    onTabBarChange(index) {
      this.tabbarIndex = index
    },
    editreport(item) {
      if (item.state == 6) {
        uni.navigateTo({
          url: '../treatment/edittreatment/edittreatment?orderNumber=' + item.orderNumber
        })
      } else if (item.state == 5) {
        uni.navigateTo({
          url: 'chat-record?orderdetail=' + encodeURIComponent(JSON.stringify(item))
        })
      }
    },
    //点击tabs
    tabschange(e) {
      this.tabindex = e

      if (e == 4) {
        this.messagequery.state = 5
      } else if (e == 5) {
        this.messagequery.state = 6
      } else {
        this.messagequery.state = Number(e)
      }

      this.messagequery.pageNumber = 1
      this.ImMessgaeList = []
      this._userGetImMessgaeList()
    },
    //获取消息列表
    _userGetImMessgaeList() {
      userGetImMessgaeList(this.messagequery).then(res => {
        if (res.data.records.length == 0 && this.messagequery.pageNumber != 1) {
          this.blackFlage = true
          return
        }
        this.ImMessgaeList = this.ImMessgaeList.concat(res.data.records)
        uni.stopPullDownRefresh()
      })
    },
    tochat(item) {
      if (item.state == 1) {
        uni.navigateTo({
          url: '../treatment/edittreatment/edittreatment?orderNumber=' + item.orderNumber
        })
      }
      else if (item.state == 2 || item.state == 3 || item.state == 6) {
        uni.navigateTo({
          url: 'receive-msg?orderdetail=' + encodeURIComponent(JSON.stringify(item))
        })
      }
      else if (item.state == 5) {
        uni.navigateTo({
          url: 'chat-record?orderdetail=' + encodeURIComponent(JSON.stringify(item))
        })
      }
      else if (item.state == 6) {
        uni.navigateTo({
          url: '../treatment/edittreatment/edittreatment?orderNumber=' + item.orderNumber
        })
      }
    },
    tosystem() {
      uni.navigateTo({
        url: 'system-msg'
      })

    },
    refresh() {
      const index = {
        0: () => {
          this.ImMessgaeList = []
          this.messagequery.pageNumber = 1
          this.blackFlage = false
          this._userGetImMessgaeList()
        },
        1: () => {
          uni.stopPullDownRefresh();
        },
        2: () => {
          this.$refs.msg.getList();
        },
        3: () => {
          console.log('666');

          uni.stopPullDownRefresh();
        },
      };
      index[this.tabbarIndex]();
    },
  }
}
</script>

<style lang="scss">
page {
  overflow-x: hidden;
}

.content {
  width: 100vw;
  padding-bottom: 100rpx;

  .main {
    padding: 0 40rpx;

    .main-list {
      width: 100%;
      // height: 140rpx;
      padding: 26rpx 0;
      border-bottom: 4rpx solid #f7f7f7;
    }

    .msgiconright {
      width: 100%;
    }

    .msgiconrighttwo {
      width: 100%;
    }

    .msgicon image {
      width: 76rpx;
      height: 76rpx;
      margin-right: 24rpx;
      border-radius: 38rpx;
    }

    .msgicon {
      position: relative;

      .msgicon-icon {
        image {
          width: 36rpx;
          height: 36rpx;
          position: absolute;
          top: -12rpx;
          left: 48rpx;
        }
      }
    }
  }
}
</style>